<template>
  <div>
    <div class="section-lazyonload">
      <div class="template-section__wrap">
        <div class="template-search">
          <el-input placeholder="请输入"></el-input>
        </div>
        <div class="template-section" :style="{ height: tabHeight }">
          <div style="display: flex;justify-content: center;">
            <el-tabs v-model="activeName" @tab-click="tabHandleClick">
              <el-tab-pane label="推荐模板" name="first">
                <ul class="template-list">
                  <li
                    v-for="(item, index) in mouldsList"
                    :key="index"
                    class="template-list__block"
                    style="width:124px;height: 168.286px; animation-delay: calc(0ms);"
                  >
                    <div class="leftPanel-template-block" style="opacity: 1;">
                      <div class="leftPanel-template-block-pop1">
                        <img
                          :src="item.designTemplateImageUrl + imgBottom"
                          alt=""
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="我的模板" name="second">
                <div style="display: flex;justify-content: center;">
                  <el-radio-group v-model="radio1" size="small">
                    <el-radio-button label="我购买的"></el-radio-button>
                    <el-radio-button label="我收藏的"></el-radio-button>
                  </el-radio-group>
                </div>
                <ul class="template-list">
                  <li
                    v-for="(item, index) in 50"
                    :key="index"
                    class="template-list__block"
                    style="width:124px;height: 168.286px; animation-delay: calc(0ms);"
                  >
                    <div class="leftPanel-template-block" style="opacity: 1;">
                      <div class="leftPanel-template-block-pop1">
                        <img
                          src="https://imgpub.chuangkit.com/designTemplate/2018/09/10/435605101_thumb@272w?v=1600332970832"
                          alt=""
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="团队模板" name="third">
                <ul class="template-list">
                  <li
                    v-for="(item, index) in mouldsList"
                    :key="index"
                    class="template-list__block"
                    style="width:124px;height: 168.286px; animation-delay: calc(0ms);"
                  >
                    <div class="leftPanel-template-block" style="opacity: 1;">
                      <div class="leftPanel-template-block-pop1">
                        <img
                          src="https://imgpub.chuangkit.com/designTemplate/2020/03/24/535631683_thumb@272w?v=1600332970832"
                          alt=""
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mouldsBoxList from "@/api/allData/mouldsData/AllMoulds";
export default {
  props: ["tabHeight"],
  name: "moban",
  data() {
    return {
      radio1: "我购买的",
      activeName: "first",
      mouldsList: mouldsBoxList.body.queryDesignTemplateBeanList,
      imgBottom: "@272w?v=1600332970832"
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    tabHandleClick() {
      console.log("tabHandleClick");
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../styles/leftPanel/index.less";

/deep/.el-input__inner {
  margin: 24px 24px 16px;
  width: 256px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 40px 0 16px;
  border: 1px solid transparent;
  position: relative;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  outline: none;
  text-align: center;
  background-color: #eaebf3;
}
</style>
